import React, { Component } from 'react'
import './index.css'

export default class index extends Component {
  state = {
    active: 0
  }

  componentDidMount() {
    this.props.autoplay && setInterval(() => {
      if (this.state.active === this.props.picList.length - 1) {
        this.setState({ active: 0 })
        return
      }
      this.setState({ active: this.state.active + 1 })
    }, this.props.time ? this.props.time : 1000);

  }

  clickChangeActive(index) {
    this.setState({ active: index })
  }

  leftChangeActive() {
    if (this.state.active === 0) {
      this.setState({ active: this.props.picList.length - 1 })
      return
    }
    this.setState({ active: this.state.active - 1 })
  }

  rightChangeActive() {
    if (this.state.active === this.props.picList.length - 1) {
      this.setState({ active: 0 })
      return
    }
    this.setState({ active: this.state.active + 1 })
  }

  render() {
    const { active } = this.state
    const { picList } = this.props
    return (
      <>
        <div className='bigBox'>
          <ul>
            {
              picList.map((item, index) => {
                return <li onClick={this.clickChangeActive.bind(this, index)} className={active === index ? 'active' : ''} key={index}></li>
              })
            }
          </ul>
          <div onClick={this.leftChangeActive.bind(this)} className='left'>←</div>
          <div onClick={this.rightChangeActive.bind(this)} className='right'>→</div>
          <img src={
            picList[active].image_src
          } />
        </div>
      </>
    )
  }
}
